<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>util - Unicorn Tests</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">

<link type="text/css" rel="stylesheet" href="../yui/logger/assets/logger.css" />     
<link type="text/css" rel="stylesheet" href="../assets/testlogger.css" />
<script type="text/javascript" src="../yui-base.source.js"></script>
<script type="text/javascript" src="../yui/logger/logger.js"></script>
<script type="text/javascript" src="../yui/yuitest/yuitest.js"></script>

<script type="text/javascript" src="../build/core/Unicorn.source.js"></script>
<script type="text/javascript" src="../build/core/lang.source.js"></script>

<script type="text/javascript" src="../build/util/util.source.js"></script>
<script type="text/javascript" src="../build/util/Dom.source.js"></script>
<script type="text/javascript" src="../build/util/Event.source.js"></script>
<script type="text/javascript" src="../build/util/Effect.source.js"></script>

<script type="text/javascript" src="jslib/jquery.js"></script>

<style type="text/css">
	body { padding: 10px; font-size: 14px; line-height: 22px }
	.test { padding: 10px; border: 1px solid #555; width: 320px; margin: 10px 0 }
	h2, h3 { margin-bottom: 0 }
</style>
</head>

<body>
<h1>Unicorn Test Page</h1>
<p>This page contains tests being run by test suite, the results of which<br />
are output in the logger to the right. <br />View the source to see how it's done.</p>
<p><input type="button" value="Run Tests" id="btnRun" /></p>


<!-- test Dom.toggleClass -->
<style type="text/css">
	.blue { color: blue }
	.red { color: red }
</style>
<div class="test blue" id="tc_test1">#tc_test1 click to toggleClass</div>
<div class="test blue" id="tc_test2">#tc_test2 click me to test Event.addListener </div>


<!-- test Dom.getComputedStyle -->
<style type="text/css">
	#gcs_test1 { height: 20px }
</style>
<div class="test" style="height: 30px; width: 320px; overflow: auto">
	<div id="gcs_test1">#gcs_test1 for test getComputedStyle</div>
	<div id="gcs_test2" style="height: 25px">#gcs_test2 for test getComputedStyle</div>
	<div id="gcs_test3">#gcs_test3 for test getComputedStyle</div>
	<div id="gcs_test4" style="height: auto">#gcs_test4 for test getComputedStyle</div>
	<div id="gcs_test5" style="height: 30px; display: none">#gcs_test5 for test getComputedStyle</div>
	<div id="gcs_test6" style="width: 300px">#gcs_test6 for test getComputedStyle</div>
	<div id="gcs_test7" style="height: 2em">#gcs_test7 for test getComputedStyle</div>
	<div id="gcs_test8" style="height: 22pt">#gcs_test8 for test getComputedStyle</div>
	<div id="gcs_test9" style="font-size: 120%">#gcs_test9 for test getComputedStyle</div>
	<div id="gcs_test10" height="29">#gcs_test10 for test getComputedStyle</div>
	<div id="gcs_test11" style="border: 1px solid gray">#gcs_test11 for test getComputedStyle</div>
	<div id="gcs_test12" style="margin: 2pt 10px">#gcs_test12 for test getComputedStyle</div>
	<div id="gcs_test13">#gcs_test13</div>
</div>


<!-- test Effect.slide -->
<style type="text/css">
	.slide_test_container { height: 120px; overflow: auto; margin-top: 5px }
	.slide_test_container .test { padding: 0; border: 1px solid #ccc; width: 250px; height: 80px; background: #DAE9F7 }
	.slide_test_container a { display: block }
</style>
<h3>#slide_test:</h3>
<div class="test slide_test_container" id="slide_test">
	<div id="slidePanel1" class="test">#slidePanel1 click to slide me  -x-y</div>
	<div id="slidePanel2" class="test">#slidePanel2 click to slide me -y</div>
	<div id="slidePanel3" class="test">#slidePanel3 click to slide me -x</div>
	<div id="slidePanel4" class="test">#slidePanel4 click to slide me no config</div>
	<div id="slidePanel5" class="test">#slidePanel5 click to slide me xy</div>
	<div id="slidePanel6" class="test">#slidePanel6 click to slide me x</div>
	<div id="slidePanel7" class="test">#slidePanel7 click to slide me y</div>
	<div id="slidePanel8" class="test">#slidePanel8 click to slide me -xy</div>
	<div id="slidePanel9" class="test">#slidePanel9 click to slide me x-y</div>
	<div id="slidePanel10" style="border: 1px solid gray">#slidePanel10 <br />width和height都没有设置时<br />click to slide me<br />config.directions: -x-y</div>
	<div id="slidePanel11" class="test" style="height: 120px">#slidePanel11 测试style中的height是否还原</div>
	<div id="slidePanel12" class="test">#slidePanel12 测试easing参数</div>
	<div id="slidePanel13" class="test">#slidePanel13 测试duration参数</div>
	<a id="slideTrigger14" href="#">slide trigger 14</a>
	<div id="slidePanel14" class="test" style="display: none">#slidePanel14 测试 slideDown</div>
	<div id="slidePanel15" class="test">#slidePanel15 测试 slideUp</div>
	<a id="slideTrigger16" href="#">slide trigger 16</a>
	<div id="slidePanel16" class="test">#slidePanel16 测试 slideToggle</div>
	<p><br /></p>
</div>

<!-- test Effect.fadeTo -->
<style type="text/css">
	.fadeTo_test_container { height: 120px; overflow: auto; margin-top: 5px }
	.fadeTo_test_container .test { padding: 0; border: 1px solid #ccc; width: 250px; height: 80px; background: #DAE9F7 }
	.fadeTo_test_container a { display: block }
</style>
<h3>#fadeTo_test:</h3>
<div class="test fadeTo_test_container" id="fadeTo_test">
	<div id="fadePanel1" class="test">#fadePanel1</div>
	<div id="fadePanel2" class="test">#fadePanel2</div>
	<p><br /></p>
</div>


<script type="text/javascript">
	
(function() {
	
	var Assert = YAHOO.util.Assert,
		ObjectAssert = YAHOO.util.ObjectAssert,
		ArrayAssert = YAHOO.util.ArrayAssert;
	
	var testCase = new YAHOO.tool.TestCase({
		//name of the test case
		name: "Unicorn TestCase",
		
		//extra information about tests
		_should: {
		    //tests with these names should fail
			fail : { test_to_fail: true },
		    
		    //tests with these names should throw an error
			error : { },
		    
		    //ignore these tests
			ignore : { }
		},
		
		test_util_EncodeUriQuery: function() {
			var U = Unicorn.util;
			
			// encodeUriQuery
			var o = {foo: 1, bar: 2};
			Assert.areEqual(U.encodeUriQuery(o), 'foo=1&bar=2');

			var o2 = {foo: 1, bar: [2, 'a', null]};
			Assert.areEqual(U.encodeUriQuery(o2), 'foo=1&bar=2&bar=a');
			
			var o3 = {foo: null, bar: ['a', null]};
			Assert.areEqual(U.encodeUriQuery(o3), 'bar=a');

			var o4 = {foo: undefined, bar: ['a', null]};
			Assert.areEqual(U.encodeUriQuery(o4), 'foo=&bar=a');
			
			var o5 = {foo: {}, bar: [{}, 'a', undefined, null]};
			Assert.areEqual(U.encodeUriQuery(o5), 'bar=a&bar=');
		},
		
		test_util_DecodeUriQuery: function() {
			var U = Unicorn.util;
			
			// decodeUriQuery
			var s = 'http://www.example.com?section=blog&id=45#comments';
			Assert.areEqual(U.decodeUriQuery(s).section, 'blog');
			Assert.areEqual(U.decodeUriQuery(s).id, '45');
			
			s = 'section=blog;id=45';
			Assert.areEqual(U.decodeUriQuery(s, false, ';').section, 'blog');
			Assert.areEqual(U.decodeUriQuery(s, false, ';').id, '45');
			
			s = 'section=blog&tag=javascript&tag=prototype&tag=doc';
			Assert.areEqual(U.decodeUriQuery(s).tag.length, 3);
			Assert.areEqual(U.decodeUriQuery(s).tag[0], 'javascript');
			Assert.areEqual(U.decodeUriQuery(s).tag[1], 'prototype');
			Assert.areEqual(U.decodeUriQuery(s).tag[2], 'doc');
			
			s = 'tag=ruby%20on%20rails';
			Assert.areEqual(U.decodeUriQuery(s).tag, 'ruby on rails');
			
			s = 'id=45&raw';
			Assert.isUndefined(U.decodeUriQuery(s).raw);

			s = 'id=45&raw=&test';
			Assert.isUndefined(U.decodeUriQuery(s).raw);
		},
		
		test_Dom_toggleClass: function() {
			var D = Unicorn.util.Dom;
			var el = D.get('tc_test1');
			
			D.toggleClass(el, 'blue');
			Assert.isFalse(D.hasClass(el, 'blue'));
			
			D.toggleClass(el, 'blue');
			Assert.isTrue(D.hasClass(el, 'blue'));
			
			D.toggleClass(el, 'blue', 'red');
			Assert.isTrue(D.hasClass(el, 'red'));
			
			D.toggleClass(el, 'blue', 'red');
			Assert.isTrue(D.hasClass(el, 'blue'));
			
			D.toggleClass(el, 'red', 'blue');
			Assert.isTrue(D.hasClass(el, 'red'));
		},
		
		test_Dom_getComputedStyle: function() {
			var L = Unicorn.lang,
				D = Unicorn.util.Dom;
			
			YAHOO.log('开始 test_Dom_getComputedStyle', 'case', 'testCase');
			
			YAHOO.log(' - 在class里定义height', 'case', 'testCase');
			Assert.areEqual(D.getComputedStyle('gcs_test1', 'height'), '20px');
			
			YAHOO.log(' - 在inline style里定义height', 'case', 'testCase');
			Assert.areEqual(D.getComputedStyle('gcs_test2', 'height'), '25px');

			YAHOO.log(' - 在class和inline里都没定义，height取默认值', 'case', 'testCase');
			Assert.areEqual(D.getComputedStyle('gcs_test3', 'height'), '22px'); // 等于line-height
						
			YAHOO.log(' - height为auto时', 'case', 'testCase');
			Assert.areEqual(D.getComputedStyle('gcs_test4', 'height'), '22px');
			
			YAHOO.log(' - height为auto时，padding的影响', 'case', 'testCase');
			D.setStyle('gcs_test4', 'padding', '5px');
			Assert.areEqual(D.getComputedStyle('gcs_test4', 'height'), '22px');
			
			YAHOO.log(' - 获取隐藏元素的height', 'case', 'testCase');
			Assert.areEqual(D.getComputedStyle('gcs_test5', 'height'), '30px');

			YAHOO.log(' - 看看width是否正常', 'case', 'testCase');
			Assert.areEqual(D.getComputedStyle('gcs_test6', 'width'), '300px');

			YAHOO.log(' - 看看格式转换', 'case', 'testCase');
			Assert.areEqual(D.getComputedStyle('gcs_test7', 'height'), '28px'); // 2 * font-size
			Assert.areEqual(D.getComputedStyle('gcs_test8', 'height'), '29px'); // 22pt
			
			YAHOO.log(' - 看看font-size', 'case', 'testCase');
			Assert.areEqual(D.getComputedStyle('gcs_test9', 'font-size'), '120%'); // 目前不支持，直接返回
			
			YAHOO.log(' - 看看height=val这种情况，应该不支持', 'case', 'testCase');
			Assert.areEqual(D.getComputedStyle('gcs_test10', 'height'), '22px');
			
			YAHOO.log(' - 看看border: 1px solid gray', 'case', 'testCase');
			Assert.areEqual(D.getComputedStyle('gcs_test11', 'border-top-width'), '1px');
			
			YAHOO.log(' - 看看margin: 2pt 10px', 'case', 'testCase');
			//Assert.areEqual(D.getComputedStyle('gcs_test12', 'margin'), '2pt 2pt 2pt 2pt');
			if(YAHOO.env.ua.webkit) {
				Assert.areEqual(D.getComputedStyle('gcs_test12', 'margin-top'), '2px');
			} else {
				Assert.areEqual(D.getComputedStyle('gcs_test12', 'margin-top'), '3px');
			}
			
			YAHOO.log(' - 看看overflow:hidden对client*, offset*的影响', 'case', 'testCase');
			//D.setStyle('gcs_test13', 'overflow', 'hidden'); // 动态设置元素的 overflow 为 hidden后，offsetHeight == 0 
			Assert.areEqual(D.getComputedStyle('gcs_test13', 'height'), '22px');
			
			YAHOO.log('结束 test_Dom_getComputedStyle', 'case', 'testCase');
		},
		
		test_Event_addListener: function() {
			var E = Unicorn.util.Event,
				D = Unicorn.util.Dom;
			
			var handler = function() { D.toggleClass(this, 'blue', 'red'); };
			
			E.on(['tc_test1', 'tc_test2'], 'click', handler);
			E.on([], 'click', handler);
		},
		
		test_Effect_slide: function() {
			var D = Unicorn.util.Dom,
				E = Unicorn.util.Event;
				Ef = Unicorn.util.Effect;
			YAHOO.log('开始 test_Effect_slide', 'case', 'testCase');
			
			YAHOO.log(' - 请点击#slide_test中的各个panel，手动测试slide方法', 'wait', 'testCase');
			
			E.on('slidePanel1', 'click', function() { Ef.slide(this, '-x-y') });
			E.on('slidePanel2', 'click', function() { Ef.slide(this, '-y', { duration: 0.4}) });
			//E.on('slidePanel2', 'click', function() { $(this).slideUp() });
			E.on('slidePanel3', 'click', function() { Ef.slide(this, '-x') });
			E.on('slidePanel4', 'click', function() { Ef.slide(this) });
			
			E.on('slidePanel5', 'click', function() { Ef.slide(this, 'xy') });
			E.on('slidePanel6', 'click', function() { Ef.slide(this, 'x') });
			E.on('slidePanel7', 'click', function() { Ef.slide(this, 'y') });
			
			E.on('slidePanel8', 'click', function() { Ef.slide(this, '-xy') });
			E.on('slidePanel9', 'click', function() { Ef.slide(this, 'x-y') });
			
			E.on('slidePanel10', 'click', function() { Ef.slide(this, '-x-y') });
			//E.on('slidePanel10', 'click', function() { $(this).slideUp(1000) }); // jQuery bug
			
			E.on('slidePanel11', 'click', function() {
				Ef.slide(this, '-x-y',
						{ callback: function() {
							if(this.style.height != '120px') {
									YAHOO.log('style在slide后未还原', 'error', 'testCase');
								}
							}
					 	});
			});
			
			E.on('slidePanel12', 'click', function() { Ef.slide(this, null, { easing: Unicorn.util.Easing.elasticBoth }) });
			E.on('slidePanel13', 'click', function() { Ef.slide(this, null, { duration: 3 }) });
			
			E.on('slideTrigger14', 'click', function(e) {
				E.preventDefault(e);
				
				Ef.slideDown('slidePanel14');
			});
			
			E.on('slidePanel15', 'click', function() { Ef.slideUp(this); });
			
			E.on('slideTrigger16', 'click', function(e) {
				E.preventDefault(e);
				
				Ef.slideToggle('slidePanel16');
				//$('#slidePanel16').slideToggle();
			});
			
			YAHOO.log('结束 test_Effect_slide', 'case', 'testCase');
		},
		
		test_Effect_fadeTo: function() {
			var D = Unicorn.util.Dom,
				E = Unicorn.util.Event;
				Ef = Unicorn.util.Effect;
			YAHOO.log('开始 test_Effect_fadeTo', 'case', 'testCase');
			
			YAHOO.log(' - 请点击#fadeTo_test中的各个panel，手动测试fadeTo方法', 'wait', 'testCase');
			
			//YAHOO.log('fadePanel1.opacity = ' + D.getStyle('fadePanel1', 'opacity'), 'info', 'testCase');
			E.on('fadePanel1', 'click', function() { Ef.fadeOut(this, {
					callback: function() {
						Ef.fadeIn(this);
					}
				});
			});
			
			E.on('fadePanel2', 'click', function() { Ef.fadeOut(this, { duration: 5 }); });
			
			YAHOO.log('结束 test_Effect_fadeTo', 'case', 'testCase');
		},
		
		test_misc: function() {
			
		},
		
		test_to_fail: function() {
			Assert.isNull('not null');
			Assert.isUndefined(null);
		}  
	});
	
	var suite = new YAHOO.tool.TestSuite("testSuite");
	suite.add(testCase);
	
	YAHOO.util.Event.onDOMReady(function (){
		//create the logger
		var logger = new YAHOO.tool.TestLogger();
		
		//add the tests
		YAHOO.tool.TestRunner.add(suite);
		
		//add event handler
		YAHOO.util.Event.addListener("btnRun", "click", function(){
			// 直接刷新页面，简单，达到目的
			location.replace(location.href);
			
			// 涉及环境的还原，麻烦
			//YAHOO.tool.TestRunner.run();
		});

		if (parent && parent != window) {
			YAHOO.tool.TestManager.load();
		} else {
			YAHOO.tool.TestRunner.run();
		}
	});
})();

</script>
</body>
</html>
